<template>
	<view class="home" :style="{paddingTop:topHeight+'px'}">
		<image class="search" src="../../static/icons/search.png" ></image>
		<image @tap="goToCart" class="cart" src="../../static/icons/cart.png" ></image>
		<!-- 轮播图 -->
		<swiper  class="banner-container" circular indicator-dots autoplay
			:interval="3000" :duration="1000">
			<swiper-item class="banner-item" :vertical="true" v-for="item in  BannerAdsList" :key="item.id">
				<image class="img" :src="item.pic"></image>
			</swiper-item>
		</swiper>

		<!-- 分类  -->
		<view class="caregory-container">
			<view  @tap="categoryProductList(item.id)"class="category-item" v-for="item in categoryList" :key="item.id">
				<image class="img" :src="item.icon"></image>
				<view class="desc">{{item.name}}</view>
			</view>

		</view>
		<!-- 限时活动 -->
		<view class="time-limit">
			<image class="img" src="../../static/icons/laba.png"></image>
			<view class="title">
				限时活动:
			</view>
			<swiper class="limit-container" vertical autoplay circular :interval="3000" :duration="1000">

				<swiper-item class="limit-item" v-for="item in recommendList" :key="item.recommendId">
						<view class="name">{{item.name}}</view>
						<view class="desc">
							<view class="price">{{item.price}}元</view>
							<view class="promote">现价:{{item.promotionPrice}}元</view>
						</view>
				</swiper-item>


			</swiper>
		</view>
		<!-- 热门推荐 -->
		<view class="hot">
			<view class="title">热门推荐</view>
			<swiper class="hot-container" :display-multiple-items="3" autoplay circular :interval="3000" :duration="1000">
				<swiper-item @tap="goToProductDetail(item.id)" class="hot-item" v-for="item in hotList" :key="item.id">
					<view class="hot-item-inner">
						<image class="img" :src="item.pic" ></image>
						<view class="name">1{{item.name}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 新品推荐 -->
		<view class="new">
			<view class="title">新品推荐</view>
			<view class="new-container">
				<view @tap="goToProductDetail(item.id)" class="new-item" v-for="item in latestProductsList" :key="item.id">
					<image class="img" :src="item.pic" ></image>
					<view class="desc">
						<view class="info">{{item.name}}</view>
						<view class="info">价格:&nbsp;{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="like">
			<view class="title">猜你喜欢</view>
			<view class="like-container">
				<view @tap="goToProductDetail(item.id)" class="like-item" v-for="item in likeList" :key="item.id">
					<image class="img" :src="item.pic"></image>
					<view class="name">{{item.name}}</view>
					<view class="desc">
						<view class="price">¥{{item.price}}元</view>
						<view class="category">{{item.productCategoryName}}</view>
					</view>
				</view>
			</view>
		</view>
		
			
		</view>
	</view>
</template>

<script>
	import {
		bannerAds as bannerAdsApi,
		findCategory as findCategoryApi,
		recommendList as recommendListApi,
		hotList as hotListApi,
		latestProducts as latestProductsApi,
		saleMostProducts as saleMostProductsApi,
		findProductList as findProductListApi
	} from '@/api/home/index.js'
	export default {
		name: 'Home',
		data() {
			return {
				BannerAdsList: [], //轮播图数据
				topHeight:0,
				categoryList: [], //分类数据
				recommendList: [], //限时活动数据
				hotList:[],//热门推荐数据
				latestProductsList:[],//最新商品的列表
				likeList:[]//猜你喜欢的商品列表
			}
		},
		onLoad() {
			this.getBannerAds();
			// #ifdef MP-WEIXIN
			var MenuButtonInfo = uni.getMenuButtonBoundingClientRect();
			// getApp().globalData.topHeight = MenuButtonInfo.bottom;
			this.topHeight=MenuButtonInfo.bottom;
			uni.setStorageSync('topHeight',MenuButtonInfo.bottom)
			uni.setStorageSync('statusHeight',MenuButtonInfo.top)
			// #endif
			
			this.getCategory();
			this.getRecommend();
			this.gethot();
			this.getLatestList();
			this.getLike();
		},
		methods: {
			//跳珠到购物车页面
			goToCart(){
				uni.navigateTo({
					url:'../user/cart/cart'
				})
			},
			//跳转到分类详情
			categoryProductList(id){
				uni.navigateTo({
					url:`../kind/productList/productList?id=${id}`
				})
			},
			//跳转到商品详情
			goToProductDetail(id){
				uni.navigateTo({
					url:`../productDetail/productDetail?id=${id}`
				})
			},
			//获取首页轮播图
			getBannerAds() {
				bannerAdsApi()
					.then(res => {
						this.BannerAdsList = res.data.items;
					})
			},
			//获取分类列表
			getCategory() {
				findCategoryApi('1308336521604599809')
					.then(res => {
						this.categoryList = res.data.category.children;
					})
			},
			//获取限时商品列表
			getRecommend() {
				recommendListApi()
					.then(res => {
						this.recommendList = res.data.items;
					})
			},
			// 获取热门推荐列表
			gethot(){
				hotListApi()
				.then(res=>{
					this.hotList=res.data.items;
				})
			},
			//获取最新商品的列表
			getLatestList(){
				latestProductsApi(1,10)
				.then(res=>{
					this.latestProductsList=res.data.rows;
				})
			},
			//猜你喜欢
			getLike(){
				saleMostProductsApi()
				.then(res=>{
					this.likeList=res.data.items;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	
	.home {
		position: relative;
		height: 100%;
		background-color: #f1ece7;
	}
	.search,.cart{
		position: absolute;
		width: 42rpx;
		height: 42rpx;
		top: 40rpx;
		right: 40rpx;
		z-index: 10;
	}
	.search{
		right: 120rpx;
	}
	// 轮播图
	.banner-container {
		width: 750rpx;
		height: 362rpx;

		.banner-item {
			height: 100%;

			.img {
				width: 750rpx;
				height: 100%;
			}
		}
	}


	// 分类
	.caregory-container {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 129.6rpx;
		margin: 60rpx auto;

		.category-item {
			height: 100%;
			width: fit-content;

			.img {
				display: block;
				width: 80rpx;
				height: 80rpx;
			}

			.desc {
				text-align: center;
				margin-top: 8rpx;
				font-size: 32rpx;
				line-height: 40rpx;
				color: #3e3e3e;
			}
		}
	}

	// 限时活动
	.time-limit {
		overflow: hidden;
		display: flex;
		width: calc(100% - 80rpx);
		height: 96rpx;
		margin: 40rpx 40rpx;
		background-color: #fff;
		align-items: center;

		.img {
			display: block;
			margin-left: 20rpx;
			margin-right: 10rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.title {
			width: fit-content;
			color: #ffa500;
			font-size: 28rpx;
			line-height: 96rpx;
			margin-right: 10rpx;
		}

		.limit-container {
			flex: 1;
			height: 96rpx;
			// height: fit-content;
			.limit-item {
				display: flex;
				padding: 0;
				align-items: center;
				width: 100%;
				height: 96rpx !important;
				.name {
					width: 50%;
					color: #3e3e3e;
					line-height: 96rpx;
				}

				.desc {
					display: flex;
					width: 50%;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					line-height: 30rpx;

					.price {
						text-decoration: line-through;
					}

					.promote {
						color: #ff1d1d;
					}
				}
			}

		}
	}

	//热门推荐
	.hot{
		width: calc(100% - 60rpx);
		margin:0 auto;
		.title{
			font-size: 32rpx;
			line-height: 40rpx;
			padding:30rpx 0;
		}
		.hot-container{
			width: 100%;
			height:224rpx;
			 .hot-item{
				text-align: center;
				.hot-item-inner{
					width: 100%;
					height: 100%;
					.img{
						display: block;
						width: 208rpx;
						height: 176rpx;
					}
					.name{
						margin-top: 10rpx;
						font-size: 26rpx;
						line-height: 38rpx;
					}
				}
				
			}
		}
	}
	// 新品推荐
	.new{
		width: 100%;
		padding:0 30rpx;
		.title{
			font-size: 32rpx;
			line-height: 40rpx;
			color:#3e3e3e;
			padding:30rpx 0;
		}
		.new-container{
			overflow: auto;
			display: flex;
			flex-wrap: nowrap;
			width: calc(100% - 60rpx);
			height: 260rpx;
			.new-item{
				display: flex;
				align-items: center;
				// width: 590rpx;
				flex:0 0 590rpx;
				height: 100%;
				background-color: #fff;
				box-sizing: border-box;
				padding:50rpx 0  50rpx 50rpx; 
				margin-right:20rpx ;
					
				.img{
					display: block;
					width: 194rpx;
					height: 168rpx;
				}
				.desc{
					display: flex;
					flex: 1;
					height: 100%;
					// width: 300rpx;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
					margin-left:50rpx ;
					.info{
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
	// 猜你喜欢
	.like{
		width: 690rpx;
		margin:0 auto;
		.title{
			font-size: 32rpx;
			line-height: 40rpx;
			padding: 30rpx 0;
		}
		.like-container{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			width: 100%;
			.like-item{
				width: 324rpx;
				height: 416rpx;
				margin:20rpx 0;
				background-color: #fff;
				.img{
					display: block;
					width: 324rpx;
					height: 238rpx;
				}
				.name{
					padding-left: 38rpx;
					margin-top: 44rpx;
					margin-bottom: 20rpx;
					font-weight: 700;
					line-height: 38rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.desc{
					display: flex;
					justify-content: space-between;
					padding:0 36rpx 18px 36rpx;
					
				}
			}
		}
	}
	
</style>
